<template>
    <el-radio-group v-model="size" aria-label="size control">
        <el-radio-button value="large">large</el-radio-button>
        <el-radio-button value="default">default</el-radio-button>
        <el-radio-button value="small">small</el-radio-button>
    </el-radio-group>
    <div class="demo-date-picker">
        <div class="block">
            <span class="demonstration">Default</span>
            <el-date-picker
                    v-model="value1"
                    type="date"
                    placeholder="请输入日期"
                    :size="size"
            />
        </div>
        <div class="block">
            <span class="demonstration">Picker with quick options</span>
            <el-date-picker
                    v-model="value2"
                    type="date"
                    placeholder="请输入日期"
                    :disabled-date="disabledDate"
                    :shortcuts="shortcuts"
                    :size="size"
            />
        </div>
    </div>
</template>

<script>

    import { ref } from 'vue'

    export default {
        name: 'LeftMenu',
        props: {

        },
        setup() {
            const size = ref<'default' | 'large' | 'small'>('default')

            const value1 = ref('')
            const value2 = ref('')
            //
            // const id = this.$route.params.id;
            //
            // console.log("id===", id);

            const shortcuts = [
                {
                    text: 'Today',
                    value: new Date(),
                },
                {
                    text: 'Yesterday',
                    value: () => {
                        const date = new Date()
                        date.setTime(date.getTime() - 3600 * 1000 * 24)
                        return date
                    },
                },
                {
                    text: 'A week ago',
                    value: () => {
                        const date = new Date()
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                        return date
                    },
                },
            ]

            const disabledDate = (time) => {
                return time.getTime() > Date.now()
            }

            return {
                size,
                value1,
                value2,
                shortcuts,
                disabledDate
            }
        }
    }

</script>

<style scoped>
    .demo-date-picker {
        display: flex;
        width: 100%;
        padding: 0;
        flex-wrap: wrap;
    }

    .demo-date-picker .block {
        padding: 30px 0;
        text-align: center;
        border-right: solid 1px var(--el-border-color);
        flex: 1;
    }

    .demo-date-picker .block:last-child {
        border-right: none;
    }

    .demo-date-picker .demonstration {
        display: block;
        color: var(--el-text-color-secondary);
        font-size: 14px;
        margin-bottom: 20px;
    }
</style>